|
在Ant Design中的Tree组件，如果数据是前端写死的，使用里面的默认展开，默认选中事件，直接调用文档的API即可，如果数据是从后端获取的，那么就需要作一些改动。
import { getDep } from '@/api/api'
import { useState, useEffect } from 'react'
import { Tree } from 'antd'
const Dep = () => {
const [loading, setLoading] = useState(true)
const [list, setList] = useState([])
const [defaultSelectedKeys, setDefaultSelectedKeys] = useState([])
const [defaultExpandedKeys, setDefaultExpandedKeys] = useState([])
useEffect(() => {
getDep({ dep: '10' })
.then((res: any) => {
if (res.code === 0) {
const data = res.data
setDefaultExpandedKeys(data.defaultExpandedKey)
setDefaultSelectedKeys(data.defaultSelectedKey)
setList(data.list)
}
setLoading(false)
})
.catch(() => {
setLoading(false)
})
}, [])
return (
{loading ? null : (
)}
)
}
export default Dep
也就是说 ，当数据来自后端的时候，要等拿到数据后再生成组件，这样才会有默认选中及默认展开的效果！
|